<!--
 * @author: sanbao
 * @Date: 2022-08-04 20:27:13
-->
<style lang='scss' scoped>
.order {
  .top {
    background-color: rgb(237, 219, 219);
    border-bottom: 4px solid #ed712e;
    height: 44px;
    line-height: 44px;
  }
  .tableimg {
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
  .warp {
    table {
      width: 100%;
      tr {
        td {
          text-align: center;
        }
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    > :nth-child(1) {
      color: red;
    }
  }
}
</style>

<template>
  <div class="order">
    <div class="top">
      <div class="banxin_center">我的订单</div>
    </div>

    <div class="banxin_center">
      <div class="list" v-for="(item, index) in dinbglist" :key="index">
        <div class="title">
          <span>订单编号:{{ item[0].order_id }}</span>
          <span>订单时间:{{ item[0].order_time }}</span>
        </div>
        <div class="warp" v-for="(v, i) in item" :key="index">
          <table>
            <tr>
              <td>
                <img
                  class="tableimg"
                  :src="'http://101.132.181.9:3000/' + `${v.product_picture}`"
                />
              </td>
              <td>{{ v.product_name }}</td>
              <td>{{ v.product_price }}</td>
              <td>{{ v.product_num }}</td>
              <td>{{ v.product_price * v.product_num }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted } from "vue";
import ShopModel from "@/api/shop";
export default {
  components: {},
  setup() {
    onMounted(() => {
      getOrder();
    });
    const data = reactive({
      dinbglist: [],
    });
    const getOrder = async () => {
      const respnse = await ShopModel.getOrder({ user_id: 9557 });
      if (respnse.data.code == "001") {
        data.dinbglist = respnse.data.orders;
      }
    };
    return {
      ...toRefs(data),
    };
  },
};
</script>
